<template>
	<view>
		<view :style="{ height: `${ statusbarHeight }px`}" class="cal" :class="curTheme"></view>
		
		<!-- 设置开始 -->
		<!-- 设置头部部分 -->
		<view class="fixed-top bg-white shadow animated slideInDown" :class="curTheme" v-if="setStatus">
			<view :style="{ height: `${ statusbarHeight }px`}"></view>
			<view class="flex align-center" style="height: 80rpx">
				<my-icon iconId="icon-jiantou-copy" class="px-2" @click.native="quit" />
				<text>{{novalName}}</text>
				<text class="px-2 font-sm text-ellipsis flex-1">{{curChapterTitle}}</text>
			</view>
		</view>
		
		<!-- 设置底部部分 -->
		<view 
		class="fixed-bottom bg-white shadow flex align-center font animated slideInUp" 
		:class="curTheme"
		style="height: 200rpx;"
		v-if="setStatus"
		>
			<view class="flex-1 flex flex-column align-center" @click="changeCatalogStatus(true)">
				<my-icon iconId="icon-xueyuan-mulu" iconSize="55" />
				<view>目录</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @click="isNight">
				<my-icon iconId="icon-yanjing" iconSize="55" />
				<view>夜间模式</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @click="changeTypeFaceStatus(true)">
				<my-icon iconId="icon-ziti1" iconSize="55" />
				<view>字体</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @click="changeMoreStatus(true)">
				<my-icon iconId="icon-diqiuhuanqiu" iconSize="55" />
				<view>更多</view>
			</view>
		</view>
		<!-- 设置结束 -->
		
		<!-- 目录开始 -->
		<uni-drawer :visible="catalogStatus" @close="changeCatalogStatus(false)">
			<view :style="{ height: `${ statusbarHeight }px`}"></view>
			<view class="flex align-center justify-center" style="height: 80rpx;">章节</view>
			<scroll-view scroll-y :style="{height: `${calHeight - 80}rpx`}">
				<block v-for="item in chapterCatalog" :key="item.id">
					<view 
					class="px-1 py-2 font text-ellipsis border-bottom rounded"  
					:class="chapterIndex + 1 === item.id ? 'curChapter': ''"
					@click="toPointerChapter(item.id)">{{item.title}}</view>
				</block>
			</scroll-view>
		</uni-drawer>
		<!-- 目录结束 -->
		
		<!-- 字体设置开始 -->
		<view 
		class="fixed-bottom bg-white shadow px-3 pt-2 animated slideInUp" 
		style="height: 180rpx;"
		v-if="typeFaceStatus"
		>
			<view class="flex">
				字体:<slider 
				class="flex-1" 
				block-size="16" 
				activeColor="#34495e" 
				backgroundColor="ecf1f0"
				min="20"
				max="50"
				:value="myFontSize"
				@change="changeFontSize"
				@changing="changeFontSize"
				/>
				</view>
			<view class="flex">
				间距:<slider 
				class="flex-1" 
				block-size="16" 
				activeColor="#34495e" 
				backgroundColor="ecf1f0"
				min="20"
				max="100"
				:value="myLineHeight"
				@change="changeLineHeight"
				@changing="changeLineHeight"
				/>
			</view>
		</view>
		<!-- 字体设置结束 -->
		
		<!-- 更多设置开始 -->
		<view
		class="fixed-bottom bg-white shadow px-3 animated slideInUp" 
		style="height: 250rpx;"
		v-if="moreStatus"
		>
			<view class="flex">
				亮度:<slider 
				class="flex-1" 
				block-size="16" 
				activeColor="#34495e" 
				backgroundColor="ecf1f0"
				min="0"
				max="100"
				:value="brightNess"
				@change="setBrightNess"
				/>
			</view>
			<view class="flex font text-light-black" style="justify-content: space-between;">
				<block v-for="item in themes" :key="item.id">
					<view class="flex-1">
						<view 
						:class="item.id" 
						style="height: 80rpx;" 
						class="border rounded mx-1"
						@click="changeThemeIndex(item.id)"
						></view>
						<view class="text-center">{{item.name}}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 更多设置结束 -->
		
		<!-- 文本开始 -->
		<swiper 
		:class="curTheme"
		:style="{height: `${calHeight}rpx`, fontSize: `${myFontSize}px`, lineHeight: `${myLineHeight}px`}" 
		@click="changeSetStatus" 
		:current="chapterIndex"
		@change="swiperChangeChapter"
		>
			<swiper-item v-for="item in loadedChapters" :key="item.id">
				<scroll-view scroll-y :style="{height: `${calHeight}rpx`}">
					<uni-load-more status="loading" v-if="!item.text"/>
					<rich-text :nodes="item.text"></rich-text>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 文本结束 -->
	</view>
</template>

<script>
	import test from '@/common/test';
	import unit from '@/common/unit.js'
	import htmlParser from '@/common/html-parser.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more';
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	export default {
		data() {
			return {
				statusbarHeight: this.$statusbarHeight,
				calHeight: 0, // 当前章节标识
				novalName: test.name,
				chapterCatalog: test.chapterCatalog,
				// testChapter: htmlParser(test.content[0].text),
				testChapters: test.content,
				setStatus: false,
				loadedChapters: [] ,//已经加载的章节
				chapterIndex: 0,
				catalogStatus: false,
				myFontSize: uni.getStorageSync('myFontSize') ? uni.getStorageSync('myFontSize') : 20,
				myLineHeight: uni.getStorageSync('myLineHeight') ? uni.getStorageSync('myLineHeight') : 45,
				typeFaceStatus: false,
				themes:[
					{id: 'blueTheme', name: '天蓝'},
					{id: 'eyeHelpTheme', name: '护眼'},
					{id: 'lightGretTheme', name: '淡灰'},
					{id: 'morningTheme', name: '早晨'},
					{id: 'nightTheme', name: '夜间'},
				],
				brightNess: 0, //亮度
				moreStatus: false,
				themeIndex: uni.getStorageSync('themeIndex') ? uni.getStorageSync('themeIndex') : 3, 
			}
		},
		components:{
			uniLoadMore,
			uniDrawer
		},
		computed:{
			curChapterTitle(){
				return this.chapterCatalog[this.chapterIndex].title;
			},
			// 当前主题
			curTheme(){
				return this.themes[this.themeIndex].id;
			}
		},
		onLoad(e){
			// 页面跳转传参在onLoad中有个e形参中获取
			// console.log('e:',e);
			this.init(e.chapterID);
		},
		created() {
			//
			let height = unit.getSystemHeight() - unit.Torpx(this.statusbarHeight);
			this.calHeight = Math.floor(height);
			this.getBrightNess();	
		},
		// mounted(){
		// 	unit.calSurplusHeight({
		// 		pageID: this,
		// 		pos: 'cal',
		// 		success: val => this.calHeight = val
		// 	});
		// },
		methods: {
			init(id){
				let curIndex = this.chapterCatalog.findIndex(v => v.id === Number(id));
				this.changeChapterIndex(curIndex);
				this.preLoad();
				this.deplyLoad();
			},
			// 退出
			quit(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 设置部分状态变更
			changeSetStatus(){
				if(!this.setStatus){
					if(this.typeFaceStatus || this.moreStatus){
						this.changeTypeFaceStatus(false);
						this.changeMoreStatus(false);
						return;
					}
				}
				this.setStatus = !this.setStatus;
			},
			// 预加载文本
			preLoad(){
				test.chapterCatalog.forEach(v => this.loadedChapters.push({
					id: v.id,
					title: v.title,
					text: ''
				}));
			},
			// 延迟加载
			deplyLoad(){
				let index = this.chapterIndex;
				console.log('index:',index);
				if(!this.loadedChapters[index].text){
					// htmlParser将html str转化为node数组
					setTimeout(() => {
						this.loadedChapters[index].text = htmlParser(test.content[index].text);
					}, 1500);
				}
			},
			// 滑动改变章节标识
			swiperChangeChapter(e){
				this.changeChapterIndex(e.detail.current);
				this.deplyLoad();
				
			},
			// 改变当前章节标识
			changeChapterIndex(index){
				this.chapterIndex = index;
			},
			// 开关章节目录抽屉
			changeCatalogStatus(Bol){
				this.catalogStatus = Bol;
				if(this.catalogStatus){
					this.changeSetStatus();
				}
			},
			// 点击章节跳转到对应章节
			toPointerChapter(id){
				let curIndex = this.chapterCatalog.findIndex(v => v.id === id);
				if(this.chapterIndex === curIndex) return;
				this.changeChapterIndex(curIndex);
				this.deplyLoad();
			},
			// 改变字体大小
			changeFontSize(e){
				this.myFontSize = e.detail.value;
				uni.setStorageSync('myFontSize', this.myFontSize);
			},
			// 改变行高
			changeLineHeight(e){
				this.myLineHeight = e.detail.value;
				uni.setStorageSync('myLineHeight', this.myLineHeight);
			},
			// 开闭字体弹窗
			changeTypeFaceStatus(Bol){
				this.typeFaceStatus = Bol;
				if(this.typeFaceStatus){
					this.changeSetStatus();
				}
			},
			// 获取亮度
			getBrightNess(){
				uni.getScreenBrightness({
					success: e => this.brightNess = Math.floor(e.value) / 8 * 100
				})
			},
			// 设置亮度
			setBrightNess(e){
				let newVal = e.detail.value;
				this.brightNess = newVal;
				uni.setScreenBrightness({
					value: newVal * 8 / 100
				})
			},
			// 开闭更多
			changeMoreStatus(Bol){
				this.moreStatus = Bol;
				if(this.moreStatus){
					this.changeSetStatus();
				}
			},
			// 更改主题标识
			changeThemeIndex(id){
				let curIndex = this.themes.findIndex(v => v.id === id);
				this.themeIndex = curIndex;
				
				// 写入主题缓存
				uni.setStorageSync('themeIndex', this.themeIndex);
			},
			isNight(){
				this.themeIndex !== 4 ? this.changeThemeIndex('nightTheme') : this.changeThemeIndex('morningTheme');
			}
		}
	}
</script>

<style>
    .curChapter{
	  background-color: #8395a7;
	  color: #fff;
    }
</style>
